<template>
  <basic-dialop :title="'喊话'" :visible.sync="visible" width="30%" @close="close">
    <div class="maikefeng-container">
      <img src="@/assets/mc.png" alt="" class="mc-img">
      <div class="mc-light-img" :style="{ height: mcHeight + 'px' }">
        <img src="@/assets/mc_light.png" alt="">
      </div>
      
    </div>
    <span slot="footer">
      <el-button @click="close">关闭</el-button>
    </span>
 </basic-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicDialop from "@/components/Basic/Dialop/BasicDialop.vue";
import BasicInput from "@/components/Basic/Form/BasicInput.vue";
export default Vue.extend({
  components: { BasicDialop, BasicInput },
  data() {
    return {
      loading: false,
      visible: false,
      mcHeight: 0,
      interval: NaN
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.mcHeight = Math.random() * 40 + 30;
    }, 100);
  },
  destroyed() {
    clearInterval(this.interval);
  },
  methods: {
    init() {
      // this.$mainApi.udpApi.sendToClient({
      //   port: 51201,
      //   code: "168",
      //   data: "CALL_START",
      //   ipAddress: 
      // });
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    submit() {
      this.visible = false;
    }
  },
})
</script>
<style lang="scss" scoped>
.image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.image-uploader .el-upload:hover {
  border-color: #409eff;
}
.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.image-uploader-image {
  width: 178px;
  height: 178px;
  display: block;
}
.maikefeng-container {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  i {
    font-size: 18px;
  }

  .mc-img {
    width: 30%;
    position: absolute;
    bottom: 0px;
  }

  .mc-light-img {
    width: 30%;
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    transition: height .01s;

    img {
      width: 100%;
      position: absolute;
      bottom: 0px;
    }
  }
}
</style>